<template>
  <section>
    <info-box :width="400"
              :visible="visible"
              :top="55"
              :right="5"
              @opened="handleOpened"
              @close="handleClose"
              @closed="handleClosedDialog">
      <!--案件信息-->
      <section class="caseInfo">
        <section v-loading="detailLoading">
          <el-collapse-transition>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>勤务部署</span>
              </div>
              <div class="text item">
                <template v-if="deployDetail">
                  <section class="command__detail__wrapper">
                    <section class="case__detail_container">
                      <el-row>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                勤务名称
                              </section>
                              <section class="content">{{deployDetail.name}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                勤务类型
                              </section>
                              <section class="content">{{deployDetail.typeName}}</section>
                            </section>
                          </section>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                责任管理区
                              </section>
                              <section class="content">{{deployDetail.area}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                第一责任人姓名
                              </section>
                              <section class="content">{{deployDetail.firstName}}</section>
                            </section>
                          </section>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                第一责任人职务
                              </section>
                              <section class="content">{{deployDetail.firstPost}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                第一责任人部门
                              </section>
                              <section class="content">{{deployDetail.firstDeptName}}</section>
                            </section>
                          </section>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                第一责任人联系方式
                              </section>
                              <section class="content">{{deployDetail.firstContact}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                具体责任人姓名
                              </section>
                              <section class="content">{{deployDetail.specificName}}</section>
                            </section>
                          </section>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                具体责任人职务
                              </section>
                              <section class="content">{{deployDetail.specificPost}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                具体责任人部门
                              </section>
                              <section class="content">{{deployDetail.specificDeptName}}</section>
                            </section>
                          </section>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                具体责任人联系方式
                              </section>
                              <section class="content">{{deployDetail.specificContact}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                船管所
                              </section>
                              <section class="content">{{deployDetail.shipOffice}}</section>
                            </section>
                          </section>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                工作站
                              </section>
                              <section class="content">{{deployDetail.workStation}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                责任区
                              </section>
                              <section class="content">{{deployDetail.zoneArea}}</section>
                            </section>
                          </section>
                        </el-col>
                      </el-row>
                      <section class="detail__item_container">
                        <section class="item_info_container">
                          <section class="item_info_container_title">
                            <div class="dian"></div>
                            巡护人员姓名
                          </section>
                          <section class="content">{{deployDetail.patrolName}}</section>
                        </section>
                      </section>
                    </section>
                  </section>
                </template>
              </div>
            </el-card>
          </el-collapse-transition>
        </section>
      </section>
    </info-box>
  </section>
</template>
<script>

  import infoBox from '../components/infoBox'

  export default {
    name: 'command-case-bar',
    components: { infoBox },
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    computed: {},
    watch: {},
    mounted() {
    },
    data() {
      return {
        // 坐标点临时缓存
        markers: [],
        // 案件信息显示控制
        caseInfoVisible: false,
        // 案件框选列表显示控制
        caseSelectionVisible: false,
        // 案件基本信息
        deployDetail: {
          item: {
            typeName: undefined
          }
        },
        // 框选的ids
        caseSelectionList: [],
        detailLoading: false,
        typeOptions: []
      }
    },
    created() {
      this.getDicts('service_deployment_type').then(response => {
        this.typeOptions = response.data
      })
    },
    methods: {
      handleOpened() {
      },
      handleClosedDialog() {
        this.deployDetail = null
      },
      handleClose() {
        this.$emit('close')
      },
      handleShowCaseInfo(data) {
        this.deployDetail = data.item
        this.deployDetail.typeName = this.selectDictLabel(this.typeOptions, data.item.type)
        this.caseInfoVisible = true
      },
      handleCloseCaseInfo(flag = false) {
        this.caseInfoVisible = flag
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '../style/main';

  .case__detail_container {
    max-height: 495px;
  }
</style>
